<template>
  <el-dialog :title="title"
    :visible.sync="detailVisible"
    width="1200px"
    custom-class="scrollable-dialog"
    append-to-body
    :close-on-click-modal="false">

      <template v-if="applyRsult == 2">
         <table class="custom-table" style="margin-bottom:20px;">
            <template v-if="infos.storeType ==='1'"> <!---入库 storeErrorType  storeCheckInfo -->
              <tr>
                <td class="tr-title">驳回理由</td><td>{{ infos.storeErrorType }}</td>
              </tr>
              <tr>
                  <td class="tr-title">备注</td><td>{{ infos.storeCheckInfo }}</td>
              </tr>
            </template>
            <template v-if="infos.storeType ==='2'"><!---资料-->
              <tr>
                <td class="tr-title">驳回理由</td><td>{{ infos.storeCheckInfo }}</td>
              </tr>
            </template>
        </table>
      </template>

      <div class="file-boxs">
        <label>入库类别：</label>
        <div class="file-inner">
          <div class="file-text">
            {{infos.supplierStoreName}}
          </div>
        </div>
      </div>

      <div class="file-boxs" v-if="infos.qualificationCertificateFileReason">
        <label>资质理由：</label>
        <div class="file-inner">
          <div class="file-text">
             {{infos.qualificationCertificateFileReason}}
          </div>
        </div>
      </div>

      <div class="file-boxs" v-if="infos.qualificationCertificateFile">
        <label>资质证书：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.qualificationCertificateFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'qualificationCertificateFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                <span @click="handleImageClick(index,'qualificationCertificateFile')" style="top:32%;">点击查看</span>
                <p class="file-text" v-for="(time,colIndex) in file.time" :key="colIndex"> 
                  {{ colIndex == 0 ? '开始时间：':'结束时间：' }}
                  {{ time }}
                </p>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"> 
                  <span>点击查看</span>
                  <img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png">
                </a>
                <p class="file-text" v-for="(time,colIndex) in file.time" :key="colIndex"> 
                  {{ colIndex == 0 ? '开始时间：':'结束时间：' }}
                  {{ time }}
                </p>
              </template>
            
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>业绩资料：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.performanceFile" :key="index">
            <template v-if="isImage(file.name)">
                   <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'performanceFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'performanceFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>财务报告：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.financialReportFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'financialReportFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'financialReportFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank">
                  <span>点击查看</span>
                  <img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png">
                </a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>完税证明：</label>
        <div class="file-inner">
           <div class="file-flex" v-for="(file,index) in infos.taxProofFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'taxProofFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'taxProofFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>社保证明：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.socialSecurityFile" :key="index">
            <template v-if="isImage(file.name)">
                   <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'socialSecurityFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'socialSecurityFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>商业信誉：</label>
        <div class="file-inner">
          <div class="file-flex" v-for="(file,index) in infos.businessCreditFile" :key="index">
            <template v-if="isImage(file.name)">
                  <el-image
                  style="width: 180px; height: 120px;"
                  :src="file.url"
                  :ref="'businessCreditFile' + index"
                  :preview-src-list="[file.url]"
                  fit="cover"
                  ></el-image>
                  <span @click="handleImageClick(index,'businessCreditFile')">点击查看</span>
              </template>
              <template v-else-if="isPDF(file.name)">
                <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
              </template>
          </div>
        </div>
      </div>

      <div class="file-boxs">
        <label>其他：</label>
        <div class="file-hot">
           <div style="margin-bottom: 20px;" v-if="infos.otherRemarks">{{ infos.otherRemarks }}</div>
           <div class="file-inner">
            <div class="file-flex" v-for="(file,index) in infos.otherFile" :key="index">
              <template v-if="isImage(file.name)">
                  <el-image
                    style="width: 180px; height: 120px;"
                    :src="file.url"
                    :ref="'otherFile' + index"
                    :preview-src-list="[file.url]"
                    fit="cover"
                    ></el-image>
                    <span @click="handleImageClick(index,'otherFile')">点击查看</span>
                </template>
                <template v-else-if="isPDF(file.name)">
                  <a :href="file.urls" target="_blank"><span>点击查看</span><img style="width: 180px; height: 120px;object-fit: contain;" src="~@/assets/pdf_file.png"></a>
                </template>
            </div>
          </div>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="detailVisible = false">关闭</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { supplierDetail,getSupplierStoreInfo } from "@/api/supplier_api";
export default {
  data() {
    return {
      detailVisible: false,
      applyRsult:0,//供应商查看驳回理由
      title:'',
      infos:{}
    };
  },
  methods: {
    openDetail(row, result) {
      if (result) {
        this.applyRsult = result
      }
        this.getStoreInfo(row)
    },
    async getStoreInfo(row) {
      this.title = row.name + '（入库资料）'
        const { code, data } = await getSupplierStoreInfo({id:row.id})
        if (code == 200) {
          if (data) {
            if (data.qualificationCertificateFile) {
              data.qualificationCertificateFile = JSON.parse(data.qualificationCertificateFile)
            }
            if (data.qualificationCertificateFileReason) {
              data.qualificationCertificateFile = data.qualificationCertificateFileReason
            }
            if (data.performanceFile) {
              data.performanceFile = JSON.parse(data.performanceFile)
            }
            if (data.financialReportFile) {
              data.financialReportFile = JSON.parse(data.financialReportFile)
            }
            if (data.taxProofFile) {
              data.taxProofFile = JSON.parse(data.taxProofFile)
            }
            if (data.socialSecurityFile) {
              data.socialSecurityFile = JSON.parse(data.socialSecurityFile)
            }
            if (data.businessCreditFile) {
              data.businessCreditFile = JSON.parse(data.businessCreditFile)
            }
            if (data.otherFile) {
              data.otherFile = JSON.parse(data.otherFile)
            }
          }
          this.infos = data
          this.detailVisible = true
        }
      },
    isImage(file) {
      return /\.(jpg|jpeg|png|gif|webp)$/i.test(file);
    },
    isPDF(file) {
      return /\.pdf$/i.test(file);
    },
     handleImageClick(index, imageList) {
        this.$nextTick(() => {
          const imageRef = this.$refs[imageList + index][0];
          if (imageRef) {
            imageRef.clickHandler();
          }
        });
      },
    supplierDetail(row) {
          this.$emit("on-detail-click",row);
    },
  }
};
</script>
<style scoped>
.mo-box + .mo-box {
  margin-top: 15px;
}
.file-boxs{
    display: flex;
    align-items: center;
    padding: 30px 0;
    border-bottom: 1px solid #f0f0f0;
    overflow: hidden;
  }
    .file-boxs:last-child{
      border-bottom: 0;
    }
  .file-boxs label{
    flex: 0 0 150px;
    text-align: center;
    font-size: 18px;
    color: #000;
  }
  .file-inner{
    flex: 1;
      display: -webkit-box;
    overflow: auto;
  }
  .file-text{
    color: #000;
    font-size: 16px;
  }
  .file-flex{
    position: relative;
     width: 180px;
     margin-right: 50px;
  }
    .file-flex img{
      display: block;
      max-width: 100%;
    }
      .file-flex span{
         background: rgba(0, 0, 0, 0.5);
         position: absolute;
         top: 50%;
         padding: 10px;
         color: #fff;
         text-align: center;
         left: 0;
         right: 0;
         transform: translate(0,-50%);
         cursor: pointer;
         z-index: 999;
      }
      .file-flex span:hover{
        color: #409EFF;
      }
</style>
